<template>
  <div class="box">
    <div class="menu-list">
      <div class="total" :class="{active:item.id === sel}" v-for="item in tabs" :key="item.id" @click="select(item)">
        {{ item.label }}
        <span>
          ({{item.id==1?num=yxf +ywg +wxz  :item.id === 2?num = yxf:item.id === 3?num = ywg:num = wxz}})
        </span>
      </div>
    </div>
    <div class="text">
      <div class="all" v-show="sel === 1">1111</div>
      <div class="all" v-show="sel === 2">222</div>
      <div class="all" v-show="sel === 3">333</div>
      <div class="all" v-show="sel === 4">444</div>
    </div>
</div>
</template>
<script>
 
  export default {
    name: 'forget',
    components:{
     
    },
    data(){
      return {
      yxf:4,
      wxz:5,
      ywg:1,
      sel:1,
      tabs: [
        {label: '全部',num:0, id: 1},
        {label: '已下发',num: 0, id: 2},
        {label: '维修中',num: 0, id: 3},
        {label: '已完工',num:0, id: 4},
      ]
    }
    },
    mounted (){
      
    },
    methods:{
      select(item){
        console.log(item.id);
       this.sel = item.id;
     },
    },
    
    
  }
 

</script>
<style lang="scss" scoped>
 .equi_container {
    display: flex;
    flex-direction: column;
  }
  .menu-list {
    height: 0.44rem;
    display: flex;
  }
  .total{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 100%;*/
    /*line-height: 0.44rem;*/
    background:#F4FAFF;
    color:#4c8fff;
    text-align:center;
    float:left
  }
  .total.active {
    background: #4c8fff;
    color: #FFFFFF;
  }
  .text{
    flex: 1;
    overflow: auto;
  }
</style>